<template>
  <div class="echarts" ref="chartRef">
    <ECharts :resize="true" :option="option" @click="handleChartClick" />
  </div>
</template>

<script setup lang="ts" name="BarChartV2">
import { withDefaults, watchEffect, ref, computed, shallowRef } from "vue";
import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { hexToRGBA } from "@/utils/color";

interface ChartProps {
  title?: string; // 标题
  legendData?: any[]; // 图例
  category?: any[]; // x轴数据
  barData?: any[]; // y轴数据
  barWidth?: number; // 柱状图宽度
  color?: any[]; // 柱状图颜色
  girdTop?: number; // 上边距
  girdBt?: number; // 下边距
  girdLt?: number; // 左边距
  girdRt?: number; // 右边距
  showLegend?: boolean;
  showyAxis?: boolean;
  showyAxisNameText?: string;
  max?: number;
  gird?: boolean;
}

const props = withDefaults(defineProps<ChartProps>(), {
  title: "",
  legendData: () => ["满意度"],
  category: () => [1, 2, 3],
  barData: () => [[1, 2, 3]],
  barWidth: 30,
  color: () => ["#00D5FF"],
  girdTop: 40,
  girdBt: 10,
  girdLt: 30,
  girdRt: 40,
  showLegend: true,
  showyAxis: true,
  showyAxisNameText: "%",
  max: 100,
  gird: false
});

const chartRef = ref(null);
const emit = defineEmits(["barClick"]);

const seriesData: any = computed(() => {
  return props.legendData.map((legend, index) => ({
    name: legend,
    type: "bar",
    barWidth: props.barWidth,
    yAxisIndex: 0,
    xAxisIndex: 0,
    itemStyle: {
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: hexToRGBA(props.color[index], 0.65) // 0% 处的颜色
          },
          {
            offset: 1,
            color: hexToRGBA(props.color[index], 0.3) // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      opacity: 1
    },
    data: props.barData[index],
    label: {
      position: "top",
      formatter: value => {
        let Result = value.value + "\n{line|}";
        return Result;
      },
      rich: {
        line: {
          width: props.barWidth,
          align: "center",
          height: 5,
          backgroundColor: props.color[index]
        }
      },
      color: "#fff",
      fontSize: 20,
      show: true,
      fontFamily: "futura",
      distance: -2
    }
  }));
});

const gridConfig = computed(() =>
  props.gird
    ? {
        left: props.girdLt,
        right: props.girdRt,
        bottom: props.girdBt,
        top: props.girdTop,
        containLabel: true
      }
    : {}
);

const option = shallowRef<ECOption>({});

watchEffect(() => {
  option.value = {
    // color: props.color[0],
    title: {
      show: false,
      text: props.title,
      textStyle: {
        color: "#D3E4FF",
        fontSize: 18
      },
      left: "center", // 设置标题水平居中
      top: -2
    },
    tooltip: {
      trigger: "axis",
      appendToBody: true,
      backgroundColor: "rgba(31,35,39,0)",
      borderColor: "rgba(31,35,39,0)",
      extraCssText:
        "text-align:left;background-image: linear-gradient(180deg, #306698 0%, rgba(23,64,100,0.16) 100%);border- radius: 4px; border:1px solid rgba(255,255,255,0);backdrop-filter: blur(5px);",
      textStyle: {
        color: "#fff"
      },
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(76,110,218,0.08)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(75,85,117,0)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    },
    legend: {
      show: props.showLegend,
      data: props.legendData,
      textStyle: {
        color: "#C2D9FF",
        fontSize: 20
      },
      top: 0,
      right: 30,
      itemWidth: 16,
      itemHeight: 8,
      itemGap: 5,
      width: "100%",
      itemStyle: {
        color: "inherit"
      }
    },
    grid: gridConfig.value,
    xAxis: {
      type: "category",
      position: "bottom",
      data: props.category,
      splitLine: {
        show: false
      },
      axisLabel: {
        interval: 0,
        rotate: 0,
        fontSize: 20,
        formatter: function (value) {
          let result = "";
          for (let i = 0; i < value.length; i += 2) {
            result += value.substring(i, i + 2) + "\n";
          }
          return result.trim(); // 去除末尾可能多余的换行符
        }
      },
      axisLine: {
        lineStyle: {
          color: "#ffffff"
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        show: props.showyAxis,
        name: "单位：" + props.showyAxisNameText,
        nameGap: 15,
        min: 0,
        max: props.max,
        splitLine: { show: false },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#B4B4B4"
          }
        },
        nameTextStyle: {
          color: "#C2D9FF",
          align: "center",
          fontSize: 18
        },
        axisLabel: {
          fontSize: 18
        }
      }
    ],
    series: seriesData.value
  };
});

// 添加点击事件处理
const handleChartClick = (params: any) => {
  emit("barClick", params);
};
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at 50% 0%,
    rgb(23 173 255 / 20%) 0%,
    rgb(23 173 255 / 20%) 0%,
    rgb(40 115 255 / 6%) 99%
  );
}
</style>
